<template>
	<view class="content">
		
		<view class="row b-b">
			<text class="tit">手机号</text>
			<input class="input" type="number" v-model="regData.mobile" placeholder="手机号码" maxlength="11" placeholder-class="placeholder" />
		</view>
		
		<view class="row b-b">
			<text class="tit">验证码</text>
			<input class="input" type="number" v-model="regData.verify_code" placeholder="验证码" maxlength="6" placeholder-class="placeholder" />
			<button @click="getCode" :disabled="disabled" class="get-vcode">
				{{countdown}} <text v-show="timestatus"> 秒后重新获取</text>
			</button>
		</view>

		<view class="row b-b">
			<text class="tit">密码</text>
			<input class="input" type="number" v-model="regData.password" placeholder="6位数密码" maxlength="6" placeholder-class="placeholder" />
		</view>
		
		<button class="add-btn" @click="confirm">修改密码</button>
	</view>
</template>

<script>
	import helper from "../../components/js/helper.js"  //公共变量js
	export default {
		data() {
			return {
				countdown:'获取验证码',
				disabled:false,
				timestatus:false,
				clear:'',
				regData: {
					mobile: '',
					password: '',
					verify_code: ''
				}
			}
		},
		onLoad(option){

			if(option.pid){
				this.regData.from_mem_id = option.pid
			}
		},
		methods: {
			// 获取验证码
	    	getCode(){
				var that = this;
				if(that.regData.mobile==''){
		      		uni.showToast({
						title:'请输入手机号码',
						icon:'none'
		      		});
				}else if(!helper.c_mobile.test(that.regData.mobile)){
	     			uni.showToast({
							title:'手机号码错误',
							icon:'none'
	     			});
				}else{
     				that.disabled = true;//禁用点击
		      		uni.request({
						url:this.$serverUrl + `/app/getVerifyCode/`+that.regData.mobile,
						header: {
							"Content-Type": "application/json"
						},
						data: {
							
						},
						method: "POST",
						success: (e) => {

							if(e.data.success){
								uni.showToast({
									title:e.data.message,
									icon:'none'
								});
								that.countdown = 60;
								that.timestatus = true;
								that.clear = setInterval(that.countDown,1000);
							}else{
								that.disabled = false; //获取失败开启点击
								
								this.$api.msg(e.data.message);
								
							}
						}
		      		})
				}  
		     },
	    	// 倒计时
	    	countDown(){
				var that = this;
				if(!that.countdown){      
     				that.disabled = false;
     				that.timestatus = false;
     				that.countdown = '获取验证码';
    				clearInterval(that.clear);
				}else{
     				that.countdown--;
				}
	    	},		
			//提交
			confirm(){
				let data = this.regData;
				
				if(!helper.c_mobile.test(data.mobile)){
					this.$api.msg('请填写正确的手机号码');
					return;
				}
				
				if(!data.verify_code){
					this.$api.msg('请填写验证码');
					return;
				}
				
				if(!data.password){
					this.$api.msg('请填写密码');
					return;
				}
				
				// 提交请求
				uni.request({
					url:this.$serverUrl +`/app/member/forgotPass`,
					header: {
						"Content-Type": "application/json"
					},
					data: data,
					method: "POST",
					success: (e) => {
						if(e.data.success){
							this.$api.msg('密码修改成功！');
							// setInterval(function(){
							// 	uni.redirectTo({
							// 		url:"/pages/public/login"
							// 	})
							// },1000)
						}else{
							this.$api.msg(e.data.message);
						}
					},
					fail: (e) => {
						uni.showModal({
							content: "请求失败，请重试！",
							showCancel: false
						})
					}
				})
				
			},
		}
	}
</script>

<style lang="scss">
	page{
		background: $page-color-base;
		padding-top: 16upx;
	}

	.row{
		display: flex;
		align-items: center;
		position: relative;
		padding:0 30upx;
		height: 110upx;
		background: #fff;
		
		.tit{
			flex-shrink: 0;
			width: 120upx;
			font-size: 30upx;
			color: $font-color-dark;
		}
		.input{
			flex: 1;
			font-size: 30upx;
			color: $font-color-dark;
		}
		.icon-shouhuodizhi{
			font-size: 36upx;
			color: $font-color-light;
		}
	}
	.default-row{
		margin-top: 16upx;
		.tit{
			flex: 1;
		}
		switch{
			transform: translateX(16upx) scale(.9);
		}
	}
	.add-btn{
		display: flex;
		align-items: center;
		justify-content: center;
		width: 690upx;
		height: 80upx;
		margin: 60upx auto;
		font-size: $font-lg;
		color: #fff;
		background-color: $base-color;
		border-radius: 10upx;
		box-shadow: 1px 2px 5px rgba(219, 63, 96, 0.4);
	}
	
	.get-vcode{
		/*position:absolute;*/
		right:5%;
		top:10upx;
		height:80upx;
		line-height:80upx;
		font-size:30upx;
		color:#FFFFFF;
		background:#0779B5;
		border-radius:50upx;
		border:1upx solid #CCCCCC;
	}
</style>
